<template>
  <div>
    <Topinput :list="list" @serve="serveFn"></Topinput>
    <Toptable :tabHeader="tabHeader" :list="list" :loading.sync="loading" @newForm="newForm" :newFn="newFn">
      <template #operation="{row}">
        <el-button @click="edit(row)" type="text" size="small">修改</el-button>
        <el-button type="text" size="small" @click="del(row)">删除</el-button>
      </template>
    </Toptable>
    <!-- <Button :total="total" :params="params"></Button> -->
    <div class="left">
      <span>共{{total}}条记录 第 {{this.params.pageIndex}} / {{totalPage}}</span>
    </div>
    <div class="right">
      <el-button-group>
        <el-button
          type="primary"
          icon="el-icon-arrow-left"
          layout="prev, pager, next"
          :total="total"
          @click="add(1)"
          :disabled="params.pageIndex===1"
        >上一页</el-button>
        <el-button background type="primary" @click="add(2)" :disabled="params.pageIndex===totalPage">
          下一页
          <i class="el-icon-arrow-right el-icon--right"></i>
        </el-button>
      </el-button-group>
    </div>
    <addForm ref="addForm" :visible="visible" :list="list"></addForm>
  </div>
</template>

<script>
import Topinput from '@/views/user/childrens/components/input'
import Toptable from '@/views/user/childrens/components/table'
// import Button from '@/views/user/childrens/components/button'
import addForm from '@/views/user/childrens/components/addForm'

import { personneList, delList } from '@/api/kuser'
export default {
  name: 'Dkd3Index',
  components: {
    Topinput,
    Toptable,
    // Button,
    addForm
  },
  data () {
    return {
      input: '',
      newFn: true,
      params: {
        pageIndex: 1,
        pageSize: 10,
        userName: '',
        roleld: '',
        regionName: ''
      },
      total: '0',
      list: [],
      tabHeader: {
        // id: '序号',
        userName: '人员名称',
        regionName: '归属区域',
        'role.roleName': '角色',
        mobile: '联系电话'
        // operation: '操作'
      },
      loading: true,
      visible: false,
      totalPage: 0
    }
  },

  created () {
    this.personneList()
  },
  methods: {
    // 渲染列表
    async personneList () {
      try {
        this.loading = true
        const res = await personneList(this.params)
        console.log(res)
        const { currentPageRecords, totalCount, totalPage } =
          await personneList(this.params)
        console.log(currentPageRecords)
        // console.log(currentPageRecords)
        this.total = totalCount
        this.list = currentPageRecords
        this.loading = false
        this.totalPage = totalPage
      } catch (error) {
        console.log(error)
      }
    },
    // 搜素
    serveFn (val) {
      this.params.userName = val
      this.personneList()
    },
    // 编辑
    edit (row) {
      console.log(row)
      this.$refs.addForm.form = { ...row }
      this.$refs.addForm.visible = true
    },
    // 删除
    async del (row) {
      console.log(row.id)
      await delList(row.id)
      this.$message.success('删除成功')
      this.personneList()
    },
    // 分液器
    add (val) {
      if (val === 1) {
        this.params.pageIndex -= 1
        if (this.params.pageIndex === 0) {
          this.params.pageIndex = 1
        }
      } else {
        this.params.pageIndex += 1
        if (this.params.pageIndex >= this.totalPage) {
          this.params.pageIndex = this.totalPage
        }
      }
      // val === 1 ? (this.params.pageIndex -= 1) : (this.params.pageIndex += 1)
      this.personneList()
    },

    newForm (val) {
      this.$refs.addForm.visible = val
    }

  }
}
</script>

<style lang="less" scoped>
.left {
  margin-top: 20px;
  float: left;
  span {
    color: #ccc;
    font-size: 16px;
  }
}
.right {
  margin-top: 20px;
  float: right;
}
</style>
